<template>
  <div>
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '80%' }"
    >
      <van-nav-bar
        class="nav"
        title="地址"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <van-search
        placeholder="请输入客户名称"
        @search="search"
        v-model="queryParam.Keyword"
        @clear="clear"
      />
      <div>
        <ul>
          <li
            class="ckbxcli"
            @click="addressClickChange(item)"
            v-for="(item, index) in data"
            :key="index"
          >
            <p style="margin-top: 8px">
              <!-- <span> {{ item.cCusName }}</span>
            <span> {{ item.cCusCode }}</span> -->
              <van-field label="收件人:" v-model="item.Addressee" />
              <van-field label="联系电话:" v-model="item.TelNumber" />
              <van-field label="收件地址:" v-model="item.Address" />
            </p>
          </li>
        </ul>
        <!-- 空提示 -->
        <van-empty v-if="isShow" description="暂无数据" />
        <!-- 加载提示 -->
        <div v-if="isLoading" style="text-align:center">
          <van-loading  size="24px">加载中</van-loading>
        </div>
        <div v-if="isNone" style="text-align:center">
          <span>没有更多了</span>
        </div>
        
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  Col,
  Cell,
  CellGroup,
  Picker,
  Popup,
  Search,
  NavBar,
  Field,
  Empty,
  Loading
} from "vant";

export default {
  components: {
    "van-nav-bar": NavBar,
    "van-picker": Picker,
    "van-popup": Popup, //弹层
    "van-search": Search, //搜索
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    "van-loading": Loading,
    "van-empty": Empty
  },
  data() {
    return {
      isShow:false,
      isNone: false,
      isLoading:false,
      loadingText:'加载中...',
      // 是否加载
      isLoading:false,
      selectedRowKeys: [],
      queryParam: [{ Condition: "CustomerId", Keyword: "" }],
      pagination: {
        // 当前页数
        current: 1,
        // 每页条数
        pageSize: 5,
        // 总条数
        Total: 0,
        showTotal: 0
      },
      entity: {},
      judgment: true,
      // 地址列表数据
      data: [],
      // 是否显示地址弹窗
      show: false,
      Id: ""
    };
  },
  created() {

    
    
    
   
  },
  methods: {
    //返回
    onClickLeft() {
      this.show = false;
    },
    close() {
      this.show = false;
    },
    clear() {
      this.queryParam = [];
      this.getDataList();
    },
    //搜索
    search(value) {
      console.log(value);
      this.queryParam.Condition = "cCusName";
      this.queryParam[0].Keyword = value;
      this.getDataList();
    },
    // 客户列表选择
    addressClickChange(item) {
      console.log(item);
      this.$emit("addressClickChange", item);
      // 选中客户数据列表后显示添加收件人按钮  调取子组件里的变量isAddButton
      this.show = false;
    },

    // 获取地址列表
    getDataList() {
       // 是否加载
      this.isLoading = true
    
      this.http
        .post(
          "/CustomerManagement/Cust_AddressBook/GetDataListByMoreCondition",
          {
            PageIndex: this.pagination.current,
            PageRows: 10,
            SortField: "Id",
            SortType: "desc",
            Search: this.queryParam,
            ...this.filters
          }
        )
        .then(resJson => {
          if(resJson.Success){
            if (resJson.Data.length == 0) {
              // 停止加载
              this.isLoading = false
              this.isNone = true
              this.isShow=false
            } else {
              this.data = resJson.Data;
              if (resJson.Data.length >= resJson.Total) {
                this.isLoading = false
                this.isShow=false
                this.isNone=true
              } else {
                this.isLoading=true
                this.isNone=false
              }
            }
          }
        });
    },
    init() {
      this.show = true;
      this.data = []
      this.getDataList();
    },
    openForm() {
      this.init();

      // this.getDataList();
    }
  }
};
</script>

<style scoped>
/* #close {
  position: fixed;
  right: 0px;
  bottom: 0px;
  background: "#fff";
} */
/* .scrollBar {
  height: 550px;
  overflow: auto;
} */

.ckbxcli {
  border: 1px solid Gainsboro;
  /* width: 250px; */
  height: 150px;
  text-align: center;
  margin-left: 15px;
  margin-top: 15px;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 2px;
  cursor: pointer;
  padding-top: 6px;
  list-style-type: none;
  display: inline-block;
}
ul {
  margin-top: 20px;
}
.nav {
  position: fixed !important;
  width: 100%;
}
</style>
